<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国家电网</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        body{
            margin:0px;
            padding: 0;
            outline: none;
            box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        @font-face {
        font-family: 'iconfont';
        src: url('iconfont.woff2?t=1629454229235') format('woff2'),
             url('iconfont.woff?t=1629454229235') format('woff'),
       url('iconfont.ttf?t=1629454229235') format('truetype');
        }
       .nav{
           height: 35px;
           padding-left: 35px;
           background-color: #D4EAF4;
           line-height: 33px;
       }
      
       .text{
           padding-top: 15px;
           padding-left:640px;
           color:#dbe6e6;
       }
       .nav .dropdown button{
           float: left;
           margin-right: 20px;
           font-weight: 700;
           color: #696664;
           font-family: '微软雅黑';
           border:none;
           background-color:#D4EAF4;
       }
       /* 第一个下拉菜单 */
       .selectOne ul{
           margin-left: 5px;
       }
       /* 第二个下拉菜单 */
       .selectTwo ul{
           margin-left: 110px;
       }
       /* 第三个下拉菜单 */
       .selectThree ul{
           margin-left: 220px;
       }
       /* 第四个下拉菜单 */
       .selectFover ul{
           margin-left: 330px;
       }
       .nav .icon{
           color:#53B8A2;
       }
       .nav ul{
           border-radius: 5px;
           margin-top: 35px;
       }
       .nav ul li a{
           padding-left: 8px;
           color:#008886;
       }
       .nav ul li a:hover{
         cursor: pointer;
         color:orange;
         background-color: rgb(230, 221, 221);
       }
       
       /* 内容展示区 */
       .content{
           width: 100%;
           height: 600px;
       }
       .content .left{
           float: left;
           width: 200px;
           height: 680px;
           clear:both;
           background-color: rgb(255, 255, 255);
           border:1px solid rgb(243, 238, 239);
       }
       .content .left .icon{
           cursor: pointer;
           width: 20px;
           height: 20px;
           padding: 1px;
           border:1px solid #ccc;
           background-color: #fff;
           background: linear-gradient(#F2FCFA,#DCF5F9);
       }
       .left p{
           width: 100%;
           height: 34px;
           text-align: right;
           padding-right: 8px;
           line-height: 34px;
           background: linear-gradient( #D4EEF4 40% ,#bad6e7 60%);
       }
        #span{
           padding-right: 40px;
           color: #3E7392;
           font-weight: 700;
       }
       /* 右侧盒子 */
       .right{
           overflow: hidden;
           height: 600px;
       }
       .content .right-top{
           width: 1000%;
           height: 35px;
           line-height: 32px;
           padding-left: 2px;
           padding-top: 3px;
           color:#80B5CC;
           background-color: #bad6e7;
       }
       .right-top ul li{
           position: relative;
           float: left;
           margin-right: 2px;
       }
       .right-top ul li a{
           color: #5fcff8;
       }
       .right-top ul li:nth-child(1){
           cursor: pointer;
           width: 70px;
           height: 30px;
           padding: 3px 8px;
           line-height: 26px;
           border:2px solid #A8DAEC;
           border-radius: 3px;
           background: linear-gradient(#D4EFFC,#DCF3FC);
       }
       .right-top .icon-home{
          color: #DD5A3A;
       } 
       .content .right-bottom{
           padding:20px;
       }
       /* 模态框样式的修改 */
       .modal-content{
           width: 400px;
           border:5px solid #7D7D7D;
       }
       .modal-header{
           background-color: #F8F8F8;
       }
       .control{
           font-weight: 400;
       }
       /* 新增内容li的样式 */
       .conentes{
           cursor: pointer;
           width: 180px;
           height:26px;
           text-align: center;
           color:#83d1ee;
           font-size: 14px;
           margin-top:2px;
           line-height: 30px;
           border-radius: 3px;
           background: linear-gradient(#D4EFFC,#c0e1ee);
       }
       .conentes::before{
        font-family: 'iconfont';
        content: "\e668";
        width: 10px;
        padding-right: 5px;
        height: 10px;
        color: #53B8A2;
       }
       .conentes::after{
           content: 'no';
           content: "\e616";
           font-family: 'iconfont';
           width: 10px;
           height: 10px;
           color:#fff;
           font-size: 18px;
           padding-left: 3px;
       }
       /* 按钮 */
       .btns{
           width: 84px;
           height: 30px;
           line-height: 32px;
           text-align: center;
           border-radius: 4px;
           border: 1px solid #ccc;
           background: linear-gradient(#F2F1F2 20%,#DEDFDE 80%);
           box-shadow: 0 0 3px 0px #ccc;
       }
    </style>
</head>
<body>
    <div class="header">
      
    </div>
   <div class="nav">
       <!-- 第一个 -->
    <div class="dropdown selectOne">
        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe icon" aria-hidden="true"></span>
          线损查询
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
         <li id="content-One" class="dropdown-menu1"><a href="#">台风小时级线损查询</a></li>
         <li id="content-Two" class="dropdown-menu2"><a href="#">查看供电所相关性用户</a></li>
         <li id="content-Three" class="dropdown-menu3"><a href="#">查询监控台区</a></li>
         <li id="content-Fove" class="dropdown-menu4"><a href="#">查询台区详细信息</a></li>
        </ul>
      </div>
      <!-- 第二个 -->
      <div class="dropdown selectTwo">
        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe icon" aria-hidden="true"></span>
          电量查询
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu"  aria-labelledby="dLabel">
         <li id="content-Five" class=" dropdown-menu5"><a href="#">单用户查询</a></li>
         <li id="content-Six" class=" dropdown-menu6"><a href="#">查询台区/供电所</a></li>
         <li id="content-Seven" class=" dropdown-menu7"><a href="#">上传文档</a></li>
        </ul>
      </div>
      <!-- 第三个 -->
      <div class="dropdown selectThree">
        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe icon" aria-hidden="true"></span>
            用户管理
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="dropdown-menu" aria-labelledby="dLabel">
         <li><a href="#" id="update"  data-toggle="modal" data-target="#exampleModal" data-whatever="">修改密码</a></li>
         <li><a href="index.html">退出登录</a></li>
        </ul>
      </div>
      <!-- 第四个 -->
      <div class="dropdown selectFover">
        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-globe icon" aria-hidden="true"></span>
          等待添加
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
        </ul>
      </div>
   </div>
   <!-- 内容展示区 -->
    <div class="content">
        <div class="left" id="left">
            <p><span id="span">操作对象选择区</span><i class="layui-icon layui-icon-prev icon" id="icon" style="font-size: 10px; color: #1E9FFF;"></i>  </p>
        </div>
        <div class="right">
            <div class="right-top">
                <ul class="uls">
                    <li id="home"><span class="glyphicon glyphicon glyphicon-home icon-home" aria-hidden="true"></span>&nbsp;<a href="javascript:;">首页</a></li>
                    <!-- 增加的内容 -->
                    <li class="conents  one" ></li>
                    <li class="conents1 "></li>
                    <li class="conents2 "></li>
                    <li class="conents3 "></li>
                    <li class="conents4 "></li>
                    <li class="conents5 "></li>
                    <li class="conents6 "></li>
                </ul>
            </div>
            <!-- 内容展示区 -->
            <div class="right-bottom" id="right-bottom">
                <!-- 新增内容 默认的内容 -->
                <form class="layui-form" style="padding-top: 30px;text-align:center;" id="complain_search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <input type="text" name="no" required  lay-verify="required" placeholder="请输入台区编号" 
                            autocomplete="off" class="layui-input" style="width: 300px;" id="no">
                        </div>
                        <div class="layui-inline">
                            <button id="search" class="btns" lay-submit
                                    lay-filter="provinceSearch">查找</button>
                        </div>
                        </div>
                    </form>
                    <div style="display: none" id="testDiv">
                        <table class="layui-hide" id="test" ></table>
                    </div>
            </div>
             </div>
          </div>
            </div>
        </div>
    </div>
    
     <!-- 模态框 -->
            <!-- 弹框内容 -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h5 class="modal-title" id="exampleModalLabel">修改密码</h5>
                    </div>
                    <div class="modal-body">
                      <form>
                        <div class="form-group">
                          <label for="recipient-name" class="control-label control">请输入修改账号</label>
                          <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="recipient-passwords" class="control-label control">请输入修改密码</label>
                            <input type="password" class="form-control" id="recipient-passwords">
                        </div>
                      </form>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" id="val">置空</button>
                      <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 弹框内容结束 -->
            </div>
    <!-- 模态框 -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./layui/layui.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>